<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 196 142"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><rect fill="#06F" rx="27" height="139.812" width="104.72" y="2.094" x="11.697"/><path fill="#002F5C" d="M124.216 141.236V50.979s70.979-8.015 70.979 45.651c0 53.666-70.979 44.606-70.979 44.606ZM0 141.906h23.395V111.27H0z"/><rect fill="#002F5C" transform="matrix(1 0 0 -1 0 105.143)" rx="8.912" height="17.825" width="23.395"/><g filter="url(#ec1eb__a)"><rect shape-rendering="crispEdges" fill="#fff" rx="10" height="44.005" width="85.781" y="20.476" x="41.22"/><g clip-path="url(#ec1eb__b)"><path fill="#000" d="M47.915 41.367h1.516v10.539h-1.516v-10.54Zm49.975 0h1.516v10.539H97.89v-10.54Zm3.895 0h1.516v10.539h-1.516v-10.54Zm-49.98-3.04h4.573c4.148 0 6.856 2.952 6.856 6.802 0 3.85-2.688 6.777-6.856 6.777h-4.547l-.026-13.578Zm4.573 12.08c3.249 0 5.133-2.362 5.133-5.278 0-2.915-1.829-5.292-5.133-5.292h-2.905v10.57h2.905Zm19.073-3.691c0 1.082-.315 2.14-.907 3.04a5.405 5.405 0 0 1-2.417 2.015 5.307 5.307 0 0 1-3.112.312 5.36 5.36 0 0 1-2.758-1.498 5.5 5.5 0 0 1-1.474-2.802 5.555 5.555 0 0 1 .306-3.162 5.455 5.455 0 0 1 1.984-2.455 5.326 5.326 0 0 1 6.803.679 5.524 5.524 0 0 1 1.575 3.871Zm-5.385-3.928a3.82 3.82 0 0 0-2.148.662 3.913 3.913 0 0 0-1.424 1.763 3.986 3.986 0 0 0-.22 2.269c.15.762.518 1.461 1.058 2.01.54.55 1.23.924 1.98 1.075.75.152 1.526.074 2.233-.223a3.88 3.88 0 0 0 1.734-1.447 3.972 3.972 0 0 0 .652-2.181c0-.516-.1-1.027-.293-1.504a3.927 3.927 0 0 0-.838-1.275 3.857 3.857 0 0 0-1.255-.85 3.809 3.809 0 0 0-1.48-.299Z"/><path fill="#000" d="M99.37 46.716c0 1.082-.316 2.14-.907 3.04a5.406 5.406 0 0 1-2.418 2.016 5.307 5.307 0 0 1-3.112.31 5.361 5.361 0 0 1-2.757-1.497 5.5 5.5 0 0 1-1.474-2.802 5.554 5.554 0 0 1 .306-3.162 5.454 5.454 0 0 1 1.984-2.455 5.326 5.326 0 0 1 6.802.679c.5.508.897 1.111 1.168 1.776.27.664.409 1.376.408 2.095Zm-5.386-3.927c-.764 0-1.512.23-2.147.661a3.914 3.914 0 0 0-1.424 1.763 3.985 3.985 0 0 0-.22 2.269c.15.762.517 1.461 1.058 2.01.54.55 1.23.924 1.98 1.075a3.81 3.81 0 0 0 2.232-.223 3.87 3.87 0 0 0 1.735-1.447 3.971 3.971 0 0 0 .651-2.181 3.973 3.973 0 0 0-.293-1.504 3.926 3.926 0 0 0-.837-1.275 3.858 3.858 0 0 0-1.255-.85 3.808 3.808 0 0 0-1.48-.298ZM49.426 38.42v1.53H47.92v-1.53h1.506Zm53.865-.03v1.529h-1.506v-1.53h1.506ZM88.335 50.226v1.591H86.77v-1.591h1.566Zm-13.167 1.591 8.362-10.415h2.057L77.23 51.818h-2.062Z"/><path fill="#000" d="M85.587 51.818 77.23 41.403h-2.06l8.362 10.415h2.056Z"/><path fill="#0389FF" d="m116.908 39.652-8.716-7.254v5.657l5.316 4.42 3.4-2.823Z"/><path fill="#000" d="m116.908 45.304 3.401-2.829-3.401-2.823-3.4 2.823 3.4 2.829Z"/><path fill="#0389FF" d="m113.508 42.475-5.316 4.425v5.658l8.716-7.254-3.4-2.829Z"/></g></g><defs><clipPath id="ec1eb__b"><path transform="translate(47.915 32.398)" fill="#fff" d="M0 0h72.39v20.159H0z"/></clipPath><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="92.004" width="133.781" y=".476" x="17.22" id="ec1eb__a"><feFlood result="BackgroundImageFix" flood-opacity="0"/><feColorMatrix result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" in="SourceAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="12"/><feComposite operator="out" in2="hardAlpha"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feBlend result="effect1_dropShadow_255_7915" in2="BackgroundImageFix"/><feBlend result="shape" in2="effect1_dropShadow_255_7915" in="SourceGraphic"/></filter></defs></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Group626652 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
